<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="opticalCanvas" width="800" height="400"></canvas>
    <script>
        const canvas = document.getElementById('opticalCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = "italic 24px 'Times New Roman'";

        // Center y-coordinate for the principal axis
        const cy = canvas.height / 2;

        // --- Draw Principal Axis ---
        ctx.beginPath();
        ctx.moveTo(0, cy);
        ctx.lineTo(canvas.width, cy);
        ctx.stroke();

        // --- Draw Plano-Convex Lens ---
        const lensCenterX = 400;
        const lensHeight = 160;
        const lensTopY = cy - lensHeight / 2;
        const lensBottomY = cy + lensHeight / 2;

        // Flat (plano) side
        ctx.beginPath();
        ctx.moveTo(lensCenterX, lensTopY);
        ctx.lineTo(lensCenterX, lensBottomY);
        ctx.stroke();

        // Convex side
        const arcRadius = 200;
        const arcCenterX = lensCenterX - Math.sqrt(arcRadius * arcRadius - (lensHeight / 2) * (lensHeight / 2));
        const startAngle = Math.asin((lensTopY - cy) / arcRadius);
        const endAngle = Math.asin((lensBottomY - cy) / arcRadius);

        ctx.beginPath();
        ctx.arc(arcCenterX, cy, arcRadius, startAngle, endAngle);
        ctx.stroke();

        // --- Draw Plane Mirror ---
        const mirrorX = 650;
        const mirrorHeight = 180;
        const mirrorTopY = cy - mirrorHeight / 2;
        const mirrorBottomY = cy + mirrorHeight / 2;

        // Reflective surface
        ctx.beginPath();
        ctx.moveTo(mirrorX, mirrorTopY);
        ctx.lineTo(mirrorX, mirrorBottomY);
        ctx.stroke();

        // Hatching for the back of the mirror
        const hatchLength = 15;
        const hatchSpacing = 15;
        ctx.lineWidth = 1.5;
        for (let y = mirrorTopY; y <= mirrorBottomY; y += hatchSpacing) {
            ctx.beginPath();
            ctx.moveTo(mirrorX, y);
            ctx.lineTo(mirrorX + hatchLength, y - hatchLength);
            ctx.stroke();
        }
        ctx.lineWidth = 2; // Reset line width

        // --- Draw Point S' ---
        const s_prime_X = 150;
        // Point
        ctx.beginPath();
        ctx.arc(s_prime_X, cy, 4, 0, 2 * Math.PI);
        ctx.fill();
        // Label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText("S'", s_prime_X, cy - 10);

        // --- Draw Distance Marker 'l' ---
        const distanceMarkerY = cy + 60;
        
        // Vertical ticks
        ctx.beginPath();
        ctx.moveTo(s_prime_X, cy);
        ctx.lineTo(s_prime_X, distanceMarkerY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(lensCenterX, cy);
        ctx.lineTo(lensCenterX, distanceMarkerY);
        ctx.stroke();

        // Horizontal line
        ctx.beginPath();
        ctx.moveTo(s_prime_X, distanceMarkerY);
        ctx.lineTo(lensCenterX, distanceMarkerY);
        ctx.stroke();

        // Arrowhead
        const arrowLength = 15;
        const arrowAngle = Math.PI / 6;
        const arrowX = lensCenterX - 50; // Position the arrow in the middle
        ctx.beginPath();
        ctx.moveTo(arrowX, distanceMarkerY);
        ctx.lineTo(arrowX - arrowLength, distanceMarkerY - arrowLength * Math.tan(arrowAngle));
        ctx.moveTo(arrowX, distanceMarkerY);
        ctx.lineTo(arrowX - arrowLength, distanceMarkerY + arrowLength * Math.tan(arrowAngle));
        ctx.stroke();

        // Label 'l'
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.fillText("l", (s_prime_X + lensCenterX) / 2, distanceMarkerY + 5);

    </script>
</body>
</html>